<template>
  <div class="app-container">
    <div v-show="!modifyInfo.visible && !detailInfo.visible">
      <!-- 条件栏 -->
      <NewPageFilter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.searchList"
        :filter-btn="filterInfo.searchBtn"
      />
      <NewPageFilter :filter-btn="filterInfo.btnList">
        <template v-slot:filter-removeRow>
          <el-button @click="removeRow" :disabled="!tableInfo.selections.length"
            >删除</el-button
          >
        </template>
      </NewPageFilter>
      <!-- 表格 -->
      <TableContainer
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="tableInfo.api"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
        @handleEvent="handleEvent"
      >
        <template v-slot:col-name="scope">
          <span class="slip-edit" @click="showDetail(scope.row)">{{
            scope.row.name
          }}</span>
        </template>
      </TableContainer>
    </div>
    <modify
      v-if="modifyInfo.visible"
      :title="modifyInfo.title"
      v-model:visible="modifyInfo.visible"
      :id="modifyInfo.id"
      @returnBack="getList"
    />
    <detail
      v-if="detailInfo.visible"
      v-model:visible="detailInfo.visible"
      :id="detailInfo.id"
      @returnBack="getList"
    />
  </div>
</template>

<script setup name="customize">
import { getCustomizePage, customizeDeletc } from '@/api/customize.js'
const Modify = defineAsyncComponent(() => import('./modify'))
const Detail = defineAsyncComponent(() => import('./detail'))

const { proxy } = getCurrentInstance()

// 过滤相关配置
const filterInfo = ref({
  query: {
    name: '',
  },
  searchList: [
    {
      componentType: 'input',
      label: '名称',
      value: 'nameLike',
      event: search,
    },
    {
      componentType: 'input',
      label: '表格-key',
      value: 'tableKeyLike',
      event: search,
    },
  ],
  searchBtn: [{ type: 'button', label: '搜索', event: search }],
  btnList: [
    { type: 'button', label: '新增', show: true, event: create },
    { type: 'slot', value: 'removeRow' },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  api: undefined,
  fieldList: [
    { label: '名称', value: 'name', type: 'slot' },
    { label: '表格-key', value: 'tableKey' },
    { label: 'view对象', value: 'viewName' },
    { label: '排序', value: 'sortTypeValue' },
    { label: '表格设置类型', value: 'tableSetTypeValue' },
    { label: '备注', value: 'remark' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '修改',
        event: update,
        show: true,
        ifRender(row) {
          return row.tableSetType === 1
        },
      },
      {
        label: '删除',
        event: removeRow,
        show: true,
        popconfirmText: '删除后将改变数据,是否继续？',
      },
    ],
  },
})
// 弹窗相关
const modifyInfo = ref({
  title: '',
  visible: false,
  id: '',
})
const detailInfo = ref({
  visible: false,
  id: '',
})
// 获取列表
function getList() {
  tableInfo.value.api = getCustomizePage
  tableInfo.value.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.api = getCustomizePage
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
// 创建
function create() {
  modifyInfo.value.title = '新增自定义表格'
  modifyInfo.value.visible = true
  modifyInfo.value.id = ''
}
// 编辑
function update(row) {
  modifyInfo.value.title = '修改自定义表格'
  modifyInfo.value.visible = true
  modifyInfo.value.id = row.id
}
function showDetail(row) {
  detailInfo.value.visible = true
  detailInfo.value.id = row.id
}
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = [...data]
      break
  }
}
function removeRow(row = undefined) {
  if (row && row.id) {
    deleteItem([row.id])
  } else {
    proxy
      .$confirm('删除后将改变数据,是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
      .then(() => {
        let ids = tableInfo.value.selections.map((item) => item.id)
        deleteItem(ids)
      })
  }
}
function deleteItem(ids) {
  customizeDeletc(ids).then((res) => {
    if (res && res.success) {
      getList()
    }
  })
}
onMounted(() => {
  getList()
})
</script>

<style scoped></style>
